<template>
	<div class="container">
		<div class="jx-container">
      <div class="jx-table">
        <el-table :data="comment" border style="width: 100%" v-loading="boo.loading">
          <el-table-column type="index" label="序列" width="60" align="center">
            <template slot-scope="scope">
              <span>{{(scope.$index + 1) + ((params_list.page - 1) * params_list.size)}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="原话题" width="180" align="center" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <el-button @click="viewRow(scope.row)" type="text" size="small">{{scope.row.name}}</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="username" label="回复用户" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="time" label="回复时间" width="150" align="center" >
          </el-table-column>
          <el-table-column prop="content" label="回复内容" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="status" label="状态" align="center" >
            <template slot-scope="scope">
              <span v-if="scope.row.status == 1">正常</span>
              <span v-else>屏蔽</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150" align="center">
            <template slot-scope="scope">
              <el-button @click="hiddenRow(scope.row,2)" type="text" size="small">推荐</el-button>
              <el-button @click="hiddenRow(scope.row,1)" type="text" size="small">{{scope.row.status == 1 ? '屏蔽' : '恢复'}}</el-button>
              <el-button @click="hiddenRow(scope.row,3)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div v-if="comment.length != 0" class="jx-pagination">
          <el-pagination @current-change="pageChange" @size-change="handleSizeChange" :current-page="params_list.page" :page-sizes="[10,50,100]" :page-size="params_list.size" layout="total, sizes, prev, pager, next, jumper"
            :total="other.allRow">
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 话题详情 -->
    <el-dialog  :visible.sync="boo.showDialog" class="jx-dialog" width="80%">
      <div slot="title" class="header-title">
        <span class="title-name">话题详情</span>
      </div>
      <el-dialog
        width="35%"
        class="jx-dialog"
        :visible.sync="boo.showType"
        append-to-body>
        <div slot="title" class="header-title">
          <span class="title-name">话题分组</span>
        </div>
        <div class="jx-detail">
          <el-checkbox-group v-model="currentRow.type">
            <el-checkbox label="1">汽车保养</el-checkbox>
            <el-checkbox label="2">发动机</el-checkbox>
          </el-checkbox-group>
        </div>
        <div class="btn-container">
          <el-button class="jx-btn" type="warning" @click="boo.showType = false">取消</el-button>
          <el-button class="jx-btn" type="primary" :loading="boo.saveing" @click="submitRow_type">保存</el-button>
        </div>
      </el-dialog>
      <el-dialog
        width="35%"
        class="jx-dialog"
        :visible.sync="boo.showTag"
        append-to-body>
        <div slot="title" class="header-title">
          <span class="title-name">话题标签</span>
        </div>
        <div class="jx-detail">
          <el-checkbox-group v-model="currentRow.item5">
            <el-checkbox label="1">保养</el-checkbox>
            <el-checkbox label="4">发动机</el-checkbox>
          </el-checkbox-group>
        </div>
        <div class="btn-container">
          <el-button class="jx-btn" type="warning" @click="boo.showTag = false">取消</el-button>
          <el-button class="jx-btn" type="primary" :loading="boo.saveing" @click="submitRow_tag">保存</el-button>
        </div>
      </el-dialog>
      <div class="jx-detail topic-detail">
        <div class="top">
          <div class="logo">
            <img src="/static/img/u5291.png"/>
            <div class="text">
              <p>
                快乐小丸子
                <el-button style="margin-left: 10px;" @click="hiddenRow" type="text" size="small">{{boo.isSpeak ? '已禁止' : '禁止发言'}}</el-button>
              </p>
              <span>注册时间：2019-08-07</span>
            </div>
          </div>
          <div class="statistical">
            <div class="item-inline">
              <span class="bg">累计发布</span>
              <span>33708</span>
            </div>
            <div class="item-inline">
              <span class="bg">累计回复</span>
              <span>33708</span>
            </div>
          </div>
        </div>
        <div class="content">
          <div class="title">
            为什么我的汽车加速加不起来，修车的说要拆发动机？
          </div>
          <div class="info">
            <div class="info-item">
              <div class="item">
                <span>发布时间：2019-08-07</span>
                <span>评论：1290</span>
                <span>话题分组：<em>汽车保养</em></span>
                <el-button @click="editType" type="text" size="small">修改分类</el-button>
              </div>
              <div class="item">
                <span>话题标签：<em>保养</em><em>发动机</em></span>
                <el-button @click="editTag" type="text" size="small">编辑</el-button>
              </div>
            </div>
            <div class="info-item">
              <el-button @click="hiddenTopic(1)" type="text" size="small">{{boo.isShield ? '已屏蔽' : '屏蔽'}}</el-button>
              <el-button @click="hiddenTopic(2)" type="text" size="small">{{boo.isRecommend ? '已推荐' : '推荐'}}</el-button>
            </div>
          </div>
          <div class="content-item">
            <div class="text">
              据香港文汇网报道，今日下午，有暴徒在香港港岛区多地发起未经警方批准的非法集结。下午约17时25分，有暴徒破坏新华社香港分社大门玻璃、闸门，并向大堂投掷燃烧弹，大堂内起火，门口玻璃碎裂。
            </div>
            <img src="/static/img/bg-login.png"/>
          </div>
        </div>
        <div class="btn-container">
          <el-button class="jx-btn" type="warning" @click="hiddenTopic(1)">{{boo.isShield ? '已屏蔽' : '屏蔽'}}</el-button>
          <el-button class="jx-btn" type="primary" :loading="boo.saveing" @click="hiddenTopic(2)">{{boo.isRecommend ? '已推荐' : '推荐'}}</el-button>
          <el-button class="jx-btn" type="warning" @click="boo.showDialog = false">删除</el-button>
        </div>
      </div> 
    </el-dialog>
	</div>
</template>

<script>
  import comment from 'static/json/content/comment.json'
	export default {
		data() {
			return {
        boo: {
          loading: false,
          showDialog: false,
          showType: false, // 分组弹框
          showTag: false, // 话题标签
          isSpeak: false, // 禁止发言
          isShield: false, //屏蔽
          isRecommend: false, //推荐
        },
        other: {
          allRow: 1,
          saveing: false,
        },
        comment: comment,
        currentRow: {},
        params_list: {
          page: 1,
          size: 10,
        },
			}
		},
		mounted(){
      let _self = this
      _self.getList()
      // console.log(123)
    },
		methods: {
      getList(){},
      pageChange(val){
        let _self = this
        _self.params_list.page = val
        _self.getList()
      },
      handleSizeChange(val) {
        let _self = this
        _self.params_list.size = val
        _self.getList()
      },
      viewRow(item){
        let _self = this
        _self.boo.showDialog = true
        _self.currentRow = JSON.parse(JSON.stringify(item))
      },
      // 屏蔽/推荐/删除
      hiddenRow(item,type){
        let _self = this
        switch (type) {
          case 1:
            _self.$message.error('该话题已屏蔽')
            break;
          case 2:
            _self.$message.success('该话题已推荐')
            break;
          case 3:
            _self.$message.error('该话题已删除')
            break;
        }
      },
      //  ---- 话题详情
      //禁用话题
      hiddenRow(){
        let _self = this
        _self.boo.isSpeak = !_self.boo.isSpeak
      },
      //修改分组
      editType(){
        let _self = this
        _self.boo.showType = true
      },
      //修改话题标签
      editTag(){
        let _self = this
        _self.boo.showTag = true
        _self.currentRow.item5 = '1'
      },
      // 屏蔽/推荐/删除
      hiddenTopic(type){
        let _self = this
        switch (type) {
          case 1:
            // _self.$message.error('该话题已屏蔽')
            _self.boo.isShield = !_self.boo.isShield
            break;
          case 2:
            // _self.$message.success('该话题已推荐')
            _self.boo.isRecommend = !_self.boo.isRecommend
            break;
          case 3:
            _self.$message.error('该话题已删除')
            break;
        }
      },
      submitRow(formName){
      }
    }
	}

</script>
<style scoped lang="sass">
  .jx-dialog /deep/ .el-dialog__body
    padding: 20px
  .topic-detail
    .top
      display: flex
      justify-content: space-between
      padding: 10px 5px
      border-bottom: 1px solid #e4e4e4
      .logo
        display: flex
        img
          width: 60px
          height: 60px
          border-radius: 50%
        .text
          font-size: 13px
          color: #999
          margin-left: 10px
          p
            margin: 0
            color: #333
            font-size: 14px
            margin-bottom: 10px
      .statistical
        display: flex
        .item-inline
          margin-left: 35px
          line-height: 48px
          height: 50px
          display: flex
          span 
            font-size: 21px
            font-weight: 600
            padding: 0 15px
            border: 1px solid #e4e4e4
          .bg 
            font-weight: 500
            font-size: 13px
            background: #e3f4ff
            border: 1px solid #e3f4ff
    .content
      padding: 20px 5px 30px
      .title
        font-size: 19px
        color: #333
        font-weight: 500
      .info
        display: flex
        justify-content: space-between
        padding: 5px 15px
        background: #fbfbfb
        color: #999
        font-size: 13px
        span
          margin-right: 30px
        em 
          font-style: normal
          margin-right: 10px
      .content-item
        padding: 20px 0
        img
          max-width: 100%
</style>
